<script setup lang="ts">
import Trans from "~/utils/sycm/trans";

const props = defineProps({
  data: {
    type: Object,
  },
  date: {
    type: String,
  },
  showZs: {
    type: Boolean,
    default: true,
  },
});
const dataSource = ref<any[]>([]);
const calcData = (data: any) => {
  columns.value = [
    {
      dataIndex: 'date',
      title: '日期',
      sorter: (a: any, b: any) => a.date - b.date,
    },
    {
      dataIndex: 'name',
      title: '属性类别',
      sorter: (a: any, b: any) => a.name - b.name,
      // width: 200,
    },
    {
      dataIndex: 'value',
      title: '属性名称',
      sorter: (a: any, b: any) => a.value - b.value,
      // width: 200,
    },
    {
      dataIndex: 'tradeIndex',
      title: props.showZs ? '交易指数' : '交易金额',
      sorter: (a: any, b: any) => a.tradeIndex - b.tradeIndex,
      // width: 80,
      align: 'right',
      dataType: 'customRender',
      render: (text: any, record: any, index: any) => {
        if (props.showZs) {
          return text;
        } else {
          let amount;
          amount = Trans.number(text).toFixed(0);
          // 每隔三位加逗号
          return amount.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
        }
      }
    },
    {
      dataIndex: 'cate',
      title: '类目名称',
      width: 250,
      sorter: (a: any, b: any) => a.cate - b.cate,
    }
  ];
  const arr: any[] = [];

  const cateName = document.querySelector(".ebase-FaCommonFilter-module__left a.common-picker-header")?.getAttribute('title');
  props.data['sycm-mc-property-preference'].tableData.data.forEach((item: any, index: number) => {
    item.props.forEach((prop: any) => {
      arr.push({
        date: props.date,
        name: item.name,
        value: prop.value,
        tradeIndex: prop.tradeIndex,
        cate: cateName,
      })
    })
  })
  dataSource.value = arr;
};
const columns = ref<any[]>([]);
onMounted(() => {
  calcData(props.data);
});
watch(() => props.data, (val) => {
  calcData(val);
}, {deep: true});
watch(() => props.date, (val) => {
  calcData(props.data);
}, {deep: true});
watch(() => props.showZs, (val) => {
  calcData(props.data);
}, {deep: true});
</script>

<template>
  <div class="content">
    <base-table :columns="columns" table-name="市场-行业客群-购买偏好-属性偏好" :data-source="dataSource" :scroll="{
      y: 'calc(100vh - 280px)'
    }">

    </base-table>
  </div>
</template>

<style scoped>
.content {
  height: calc(100vh - 200px);
  overflow-y: scroll;
}
</style>
